RTK query 部分在專案上並未實用過，其實官網提供的基礎範例也並未使用，大概介紹一下他的概念就行。

功能面

1.RTKQ 會自動處理 dedupe(重複數據刪除) 的情況（在同一頁面中有多個元件需要大相同的 API 取得相同的資源時，只會發出一次 request）。
2.透過 RTK Query 可以不需使用 thunks 或任何 reducers 來管理 data fetching 的資料

補充：
thunk：
thunk為一個能在其中呼叫另一個子程序(subroutine)的子程序。若以function的作為例子，thunk就是一個function的內部會去呼叫另一個function，也就是再包裝的概念。
將這個概念用在Redux-Thunk上，便是包裝一個action creator為一個thunk。原生概念的action creator是回傳一個action(object)；而若是「thunk化」的action creator，則回傳一個function。

RTK Query包含以下APIs:

• createApi():
  RTK Query的核心功能，可以建立 API service，集中管理 API 定義檔，在 createApi中提供了 reducer、middleware、custom hooks 等可以使用。
  ??如下方程式範例，每一個 baseURL 都只應該有一個 API slice，例如，如果會需要取得/api/posts 和 /api/users 的資料，則它們應該是在同一個 API slice 中，有相同的 baseURL /api/，和不同的 endpoint。

• fetchBaseQuery():
  用於簡化 fetch requests。常用於api取得authorization 。
  在 createApi以baseQuery代入使用。

// Or from '@reduxjs/toolkit/query/react'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'

export const pokemonApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }), // Set the baseUrl for every endpoint below
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name: string) => `pokemon/${name}`, // Will make a request like https://pokeapi.co/api/v2/pokemon/bulbasaur
    }),
    updatePokemon: builder.mutation({
      query: ({ name, patch }) => ({
        url: `pokemon/${name}`,
        method: 'PATCH', // When performing a mutation, you typically use a method of PATCH/PUT/POST/DELETE for REST endpoints
        body: patch, // fetchBaseQuery automatically adds `content-type: application/json` to the Headers and calls `JSON.stringify(patch)`
      }),
    }),
  }),
})

• <ApiProvider />:
  若無Redux store同Provider的功能。
  ??小提醒:它與現有的 Redux store一起使用會導致它們相互衝突。

  • 範例 ApiProvider

    import * as React from 'react';
    import { ApiProvider } from '@reduxjs/toolkit/query/react';
    import { Pokemon } from './features/Pokemon';
    
    function App() {
      return (
        <ApiProvider api={api}>
          <Pokemon />
        </ApiProvider>
      );
    }
    

  • 範例 Provider

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { Provider } from 'react-redux'
    
    import { App } from './App'
    import createStore from './createReduxStore'
    
    const store = createStore()
    
    // As of React 18
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
      <Provider store={store}>
        <App />
      </Provider>
    )
    

• setupListeners():
  執行 refetchOnMount 、 refetchOnReconnect 的行為。
  透過 refetch 可以確保過期的資料有從伺服器被更新